CSS盒模型
CSS盒模型指的是浏览器用来渲染HTML元素的方式。每个HTML元素都被看作是一个矩形的盒子，它具有四个边框、内边距、外边距和内容。
一、前置知识：行内元素和块级元素
在HTML中，元素可以被分为两种基本类型：行内元素和块级元素。这两种元素的主要区别在于它们的默认显示方式和在文档流中占据的空间大小。
1.行内元素display: inline
行内元素（Inline Element）是指默认情况下在一行内显示的元素，它们只占据必要的宽度空间，不会强制换行。常见的行内元素包括<a>、<span>、<em>、<strong>、<img>等。
行内元素的特点：
- 默认宽度和高度由内容决定，无法设置固定宽度和高度；
- 不会产生换行，相邻的行内元素会排列在同一行，直到一行排不下才会自动换行；
- 不能设置垂直方向的边距和内外边距，水平方向可以设置。
2.块级元素display: block
块级元素（Block Element）是指默认情况下占据一整行的元素，它们会自动在前面产生一个换行符，后面也会产生一个换行符，通常用于显示一块内容，例如段落、标题、列表等。常见的块级元素包括<div>、<p>、<ul>、<h1>等。
块级元素的特点：
- 默认宽度为100%，可以设置固定宽度和高度；
- 可以设置垂直方向和水平方向的边距和内外边距；
- 会产生换行，前后会自动产生一个换行符。
3.行内块元素display: inline-block
行内块元素（Inline Block Element）是指同时具有行内元素和块级元素的特性的元素。它们可以与其他行内元素一起排列在同一行，并且可以设置固定宽度和高度。常见的行内块元素包括<img>、<input>等。
行内块元素的特点：
- 默认宽度和高度由内容决定，可以设置固定宽度和高度；
- 可以设置垂直方向和水平方向的边距和内外边距；
- 可以与其他行内元素一起排列在同一行。
4.总结
- 行内元素默认在一行内显示，不会产生换行，可以设置水平方向的边距和内外边距；
- 块级元素默认占据一整行，会产生换行，可以设置垂直方向和水平方向的边距和内外边距；
- 行内块元素同时具有行内元素和块级元素的特性，可以与其他行内元素
二、盒子模型的组成部分
一个盒子模型通常由以下四个组成部分组成：
如下图：
内容区域（Content）：内容区域是元素所包含的实际内容，例如文本、图片、视频等。内容区域的大小由元素的宽度和高度属性决定，可以通过CSS样式进行控制。
内边距（Padding）：内边距是元素内容区域与边框之间的空白区域，通常用于调整元素的显示效果。内边距的大小可以通过CSS样式进行控制，可以设置上、右、下、左四个方向的内边距大小。
边框（Border）：边框是围绕元素内容区域和内边距的一条线，用于将元素与其他元素区分开来。边框的样式、宽度和颜色可以通过CSS样式进行控制。
外边距（Margin）：外边距是元素边框和周围元素之间的空白区域，通常用于调整元素与其他元素之间的距离。外边距的大小可以通过CSS样式进行控制，可以设置上、右、下、左四个方向的外边距大小。
这四个部分的尺寸可以通过CSS样式来控制。
三、盒子模型两种标准
CSS标准盒模型
CSS标准盒模型（Standard Box Model）是W3C标准规定的盒模型，包括内容区域、内边距、边框和外边距四部分。内容区域指元素的实际内容，包括文本、图像等。内边距是内容区域与边框之间的空间，用于控制元素内部的间距。边框是包围内容区域和内边距的线条。外边距是边框和相邻元素之间的空间，用于控制元素之间的间距。
在CSS标准盒模型中，元素的宽度和高度分别是指内容区域的宽度和高度，不包括内边距、边框和外边距。
IE盒模型
IE盒模型（IE Box Model）是早期IE浏览器采用的盒模型，它将内容区域、内边距和边框都计入元素的宽度和高度中，而外边距仍然是元素自身宽度和高度之外的空间。因此，IE盒模型中的元素宽度和高度包括了内边距和边框的宽度和高度。
为了解决不同浏览器之间的盒模型差异，CSS3中新增了一个box-sizing属性，可以控制盒模型的计算方式。默认值为content-box，即CSS标准盒模型。将box-sizing属性设置为border-box，即可使用IE盒模型。此时元素的宽度和高度包括了内边距和边框的宽度和高度，而内容区域的宽度和
四、元素隐藏
元素隐藏通常有两种方式，通过下方代码演示效果，思考这两种方式差异
<html>
<head>
<title>元素隐藏的两种方式</title>
<style>
.item {
width: 100px;
height: 100px;
}
.item1 {
background-color: red;
}
.item2 {
background-color: green;
}
.item3 {
background-color: yellow;
}
/* 第一种方式 */
.main1 .item.item2 {
display: none;
}
.main2 .item.item2 {
visibility: hidden;
}
</style>
</head>
<body>
<div class="main1">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
</div>
<div class="main2">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
</div>
</body>
</html>
五、块级格式化上下文
BFC块级格式化上下文（Block Formatting Context）是Web页面中的一种渲染模式，它定义了元素如何布局及相互作用。BFC是一个独立的渲染区域，规定了内部元素如何布局，并且不会影响到外部元素。
1.创建BFC
BFC可以通过以下方式来创建：
- 根元素或包含根元素的元素；
- 浮动元素（元素的float不是none）；
- 绝对定位元素（元素的position为absolute或fixed）；
- display属性值为inline-block、table-cell、flex、grid、list-item的元素；
- overflow不为visible的元素；
2.BFC的特性
BFC具有以下特性：
- 内部的Box会在垂直方向上一个接一个地放置；
- Box垂直方向的距离由margin决定。同一个BFC中相邻两个Box的margin会发生重叠；
- BFC的区域不会与float box重叠；
- BFC在页面上是一个独立的容器，容器里面的子元素不会影响到外面的元素；
- 计算BFC的高度时，浮动元素也会参与计算。
3.BFC的应用场景
BFC可以解决一些常见的布局问题，比如：
3.1 清除浮动
使用BFC可以清除浮动造成的影响，常见的方式是将父元素设为BFC。
.parent { overflow: auto; }
3.2 防止margin重叠
在同一个BFC中相邻的元素之间的margin会发生重叠，可以将其中一个元素设为新的BFC来解决。
<!-- 父子元素边距重叠 -->
<div class="parent">
<div class="child"></div>
</div>
.parent {
overflow: hidden;
}
.child {
margin: 20px;
}
3.3 制作多列布局
使用BFC可以制作多列布局，例如使用display: inline-block和text-align: justify的方式。
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
text-align: justify;
font-size: 0;
}
.child {
display: inline-block;
font-size: 16px;
width: 20%;
margin-right: -4px;
}
4.总结
BFC是Web页面中的一种渲染模式，可以解决一些常见的布局问题。BFC具有独立的渲染区域，内部元素相互作用，不会影响到外部元素。BFC可以通过创建特定的CSS环